<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios入门与源码解析</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
  <!-- <script src="../axios.js"></script> -->
</head>

<body>
  <div class="container">
    <h2>axios源码解析</h2>
  </div>
  <script>
    // 1.声明构造函数
    function Axios(config){
      this.config = config
    }
    Axios.prototype.request = function(config){
      // 发送请求
      // 对config的其他操作
      // 创建一个promise对象
      let promise = Promise.resolve(config)
      // 声明数组
      let chains = [dispatchRequest,undefined]//undefined占位
      // 调用then方法指定回调
      let reult = promise.then(chains[0],chains[1])
      return reult
    }
    // 2.dispatchRequest
    function dispatchRequest(config){
      console.log('dispatchRequest 函数')
      // 调用适配器发送请求
      return xhrAdapter(config).then(res=>{
        // 对象响应结果进行处理
        return res
      },error=>{
        throw error
      })
    }
    // 3.adapter适配器
    function xhrAdapter(config){
      console.log('xhrAdapter 函数')
      return new Promise((resolve,reject)=>{
        // 发情ajax请求
        let xhr = new XMLHttpRequest()
        // 初始化
        xhr.open(config.method,config.url)
        // 发送
        xhr.send(0)
        // 绑定事件
        xhr.onreadystatechange = function(){
          if(xhr.readyState===4){
            // 判断成功条件
            if(xhr.status>=200 && xhr.status<300){
              resolve({
                // 配置对象
                config:config,
                // 响应体
                data:xhr.response,
                // 响应头
                headers:xhr.getAllResponseHeaders(),//字符串 parseHeaders
                // xhr
                request:xhr,
                // 响应状态码
                status:xhr.status,
                // 响应状态字符串
                statusText:xhr.statusText
              })
            }else{
              reject(new Error('请求失败 状态码为：'+xhr.status))
            }
          }
        }
      })
    }
    // 4.创建axios函数
    let axios = Axios.prototype.request.bind(null)

    axios({
      method:'get',
      url:'http://localhost:3000/posts'
    }).then(res=>{
      console.log(res)
    })
  </script>
</body>

</html>